import React, { Component } from 'react';
import { Grid, CascaderSelect, DatePicker } from '@alifd/next';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PageHead from '../../../../components/PageHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api';
// import { PurStatus } from '../../../../utils/setting';

const { RangePicker } = DatePicker;
const { Row, Col } = Grid;
export default class chooseHead extends Component {
  static displayName = '采购统计筛选';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      GoodsTypeList: [],
      filterData: {},
    };
  }
  // 获取商品类别列表
  getGoodsTypeList= () => {
    service({
      method: 'get',
      url: api.GoodsTypeList,
    })
      .then((res) => {

        const data = res.data;
        this.setState(
          {
            GoodsTypeList: data.class_list,
          }
        );
      });
  }
  formChange= (value) => {
    this.setState(
      {
        filterData: value,
      }, () => {
        this.props.filterChange(this.state.filterData);
      }
    );
  }
  componentDidMount() {
    this.getGoodsTypeList();
  }
  render() {
    return (
      <div style={styles.overview}>
        <PageHead title="采购统计筛选" />
        <IceContainer style={styles.alignRight}>
          <IceFormBinderWrapper onChange={this.formChange} value={this.state.filterData}>
            <Row gutter="5">
              <Col span="6">
                <span className="SelectLabel">商品类别</span>
                <IceFormBinder name="class_id">
                  <CascaderSelect
                    dataSource={this.state.GoodsTypeList}
                    size="large"
                    expandTriggerType="hover"
                    placeholder="请选择商品类别"
                    className="Select"
                    hasClear
                  />
                </IceFormBinder>
              </Col>
              <Col span="7">
                <span className="SelectLabel">采购时间</span>
                <IceFormBinder name="time">
                  <RangePicker size="large" className="DatePicker" />
                </IceFormBinder>
              </Col>
            </Row>
          </IceFormBinderWrapper>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  col: {
    margin: '10px 20px 10px 0',
    float: 'left',
  },
  row: {
    marginBottom: '20px',
  },
  input: {
    float: 'left',
  },
};
